<template>
  <view class="citylist" ref="wrapper">
    <view style="height: 100%;overflow: scroll">
      <view class="area">
        <view class="title border-topbottom">当前城市</view>
        <view class="city-header">
          <view class="city-center" @click="goback()">
            <view class="city-name">{{currientcity}}</view>
          </view>
        </view>
      </view>
<!--      <view class="area">-->
<!--        <view class="title border-topbottom">热门城市</view>-->
<!--        <view class="city-header">-->
<!--          <view class="city-center" v-for="item of hot" :key='item.id' @click="handleclick(item.name)">-->
<!--            <view class="city-name">{{item.name}}</view>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
      <scroll-view :scroll-into-view="letter" scroll-y="true" class="scroll-view"
                   scroll-with-animation="true" style="height: 100%;">
        <view class="area"
              v-for="(item,key) in cities"
              :key='key'
              :ref='item.first'
              :id="item.first"
        >
          <view class="title border-topbottom">{{item.first}}</view>
          <view class="item-list">
            <view class="item border-bottom"
                  v-for="(inneritem,index) in item.list"
                  :key="inneritem.id"
                  @click="handleclick(inneritem)">
              {{inneritem.name}}
            </view>
          </view>
        </view>
      </scroll-view>

    </view>
  </view>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'CityList',
  props: {
    cities: Array,
    hot: Array,
    letter:{
      type:String,
      default:'A',//设个默认值
    }

  },
  data () {
    return {
      currientcity: uni.getStorageSync("city"),
      windowHeight:''
    }
  },
  methods: {
    handleclick (city) {
      this.changecity(city)
      setTimeout(()=>{
        uni.switchTab({
          url: '/pages/index/index'
        })
      },500)
    },
    goback(){
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    ...mapActions(['changecity'])
  },
  mounted () {
  },
  onLoad(){
    let that = this;
    uni.getSystemInfo({
      success:function(res){
        that.windowHeight = res.windowHeight;
      }
    })
  },
  watch: {
  }
}
</script>

<style lang="scss" scoped="">
.border-topbottom{
  &:before{
    border-color: #ccc
  }

  &:after{
    border-color: #ccc
  }

}

.border-bottom{
  &:before{
    border-color: #ccc
  }
}

.citylist{
  position: absolute;
  top: 80rpx;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  .title{
    width: 100%;
    height: 44rpx;
    line-height: 44rpx;
    background-color: #eee;
    padding-left: 20rpx;
    color: #666;
    font-size: 26rpx;
  }

  .city-header{
    padding: 10rpx 36rpx 10rpx 10rpx;
    overflow: hidden;
  }

  .city-center{
    padding: 0 10rpx;
    float: left;
  }

  .city-name{
    margin: 10rpx;
    border: 2rpx solid #CCCCCC;
    border-radius: 40rpx;
    text-align: center;
    padding: 10rpx 10rpx;
  }

  .item-list{
    .item{
      line-height: 84rpx;
      padding-left: 20rpx;
    }

  }

}

</style>
